<template>
  <!--酒体配置-->
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="main-container">
        <el-card class="box-card !border-none" shadow="never">
          <div class="flex justify-between items-center">
            <span class="text-page-title">{{ t("types") }}</span>
            <el-button type="primary" @click="addTypesEvent()">
              {{ t("addTypes") }}
            </el-button>
          </div>
          <div v-loading="typeData.loading" style="margin-top: 20px">
            <div
              v-for="(row, index) in typeData.data"
              :key="index"
              class="types-item"
              :class="{ 'types-item-active': bodyData.searchParam.type_id === row.id }"
              @click="changeTypes(row)"
            >
              <el-tooltip effect="dark" :content="row?.type_name" placement="top">
                <div class="name">{{ row?.type_name || "-" }}</div>
              </el-tooltip>
              <el-tag :type="row?.status == 1 ? 'success' : 'danger'">
                {{ t(row?.status == 1 ? "statusUnlock" : "lock") }}
              </el-tag>
              <div class="w-[80px]">
                <el-button type="primary" link @click.stop="editTypesEvent(row)">
                  {{ t("edit") }}
                </el-button>
                <el-button type="primary" link @click.stop="delTypesEvent(row)">
                  {{ t("delete") }}
                </el-button>
              </div>
            </div>
            <el-empty
              v-if="!typeData.data.length"
              :description="t('emptyData')"
              :image-size="70"
            />
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="18">
      <div class="main-container">
        <el-card class="box-card !border-none" shadow="never">
          <div class="flex justify-between items-center">
            <span class="text-page-title">{{ pageName }}</span>
            <el-button type="primary" @click="addWineBodyEvent()">
              {{ t("addWineBody") }}
            </el-button>
          </div>
          <el-form
            :inline="true"
            :model="bodyData.searchParam"
            ref="searchFormRef"
            class="mt-[20px]"
          >
            <el-form-item :label="t('status')" prop="status">
              <el-select
                v-model="bodyData.searchParam.status"
                :placeholder="t('statusPlaceholder')"
                clearable
              >
                <el-option :label="t('statusUnlock')" :value="1" />
                <el-option :label="t('lock')" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadBodyList()">
                {{ t("search") }}
              </el-button>
              <el-button @click="resetForm(searchFormRef)">{{ t("reset") }}</el-button>
            </el-form-item>
          </el-form>
          <div style="margin-top: 20px">
            <el-table v-loading="bodyData.loading" :data="bodyData.data" size="large">
              <template #empty>
                <span>{{ !bodyData.loading ? t("emptyData") : "" }}</span>
              </template>
              <el-table-column prop="logo" :label="t('logo')" align="center" width="120">
                <template #default="{ row }">
                  <el-image
                    v-if="row.logo"
                    class="w-[70px] h-[70px]"
                    :src="img(row.logo)"
                    fit="contain"
                  >
                    <template #error>
                      <div class="image-slot">
                        <img
                          class="w-[70px] h-[70px]"
                          src="@/addon/shop_fenxiao/assets/goods_default.png"
                          fit="contain"
                        />
                      </div>
                    </template>
                  </el-image>
                  <img
                    v-else
                    class="w-[70px] h-[70px]"
                    src="@/addon/shop_fenxiao/assets/goods_default.png"
                    fit="contain"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                :label="t('name')"
                min-width="100"
                align="left"
              />
              <el-table-column prop="year" :label="t('year')" align="center" />
              <el-table-column :label="t('recommendRatio')" align="center">
                <template #default="{ row }">
                  {{ row.min_percentage || "0" }}%~{{ row.max_percentage || "0" }}%
                </template>
              </el-table-column>
              <el-table-column :label="t('price')" align="center">
                <template #default="{ row }"> {{ row.price || "-" }}/500ml </template>
              </el-table-column>
              <el-table-column :label="t('status')" align="center">
                <template #default="{ row }">
                  <el-tag :type="row.status == 1 ? 'success' : 'danger'">
                    {{ t(row.status == 1 ? "statusUnlock" : "lock") }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="sort" :label="t('sort')" align="center" />
              <el-table-column :label="t('createTime')" min-width="120" align="center">
                <template #default="{ row }">
                  {{ row.create_time || "" }}
                </template>
              </el-table-column>
              <el-table-column
                :label="t('operation')"
                align="right"
                fixed="right"
                width="130"
              >
                <template #default="{ row }">
                  <el-button type="primary" link @click="editWineBodyEvent(row)">
                    {{ t("edit") }}
                  </el-button>
                  <el-button type="primary" link @click="delWineBodyEvent(row)">
                    {{ t("delete") }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="mt-[16px] flex justify-end">
              <el-pagination
                v-model:active-page="bodyData.page"
                v-model:page-size="bodyData.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="bodyData.total"
                @size-change="loadBodyList()"
                @current-change="loadBodyList"
              />
            </div>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
  <edit-types ref="editTypesDialog" @complete="loadTypeList()" />
  <edit-wine-body ref="editWineBodyDialog" @complete="loadBodyList()" />
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
import { t } from "@/lang";
import { img } from "@/utils/common";
import {
  getTypeList,
  deleteTypeApi,
  getBodyList,
  deleteBodyApi,
} from "@/app/api/alcohol";
import editTypes from "@/app/views/alcohol/components/edit-types.vue";
import editWineBody from "@/app/views/alcohol/components/edit-wine-body.vue";
import { useRoute } from "vue-router";

const route = useRoute();
const pageName = route.meta.title;
const typeData = reactive({
  loading: false,
  data: [],
});
const bodyData = reactive({
  loading: false,
  searchParam: {
    page: 1,
    limit: 10,
    type_id: null,
    status: null,
  },
  data: [],
  total: 0,
});
const editTypesDialog: Record<string, any> | null = ref(null); // 编辑分类弹窗
const editWineBodyDialog: Record<string, any> | null = ref(null); // 编辑酒体弹窗
const searchFormRef: Record<string, any> | null = ref(null);

onMounted(() => {
  loadTypeList();
});

/**
 * 加载分类列表
 * */
const loadTypeList = () => {
  typeData.loading = true;
  getTypeList()
    .then((res: any) => {
      typeData.data = res.data;
      bodyData.searchParam.type_id = typeData.data[0]?.id;
      loadBodyList();
    })
    .finally(() => {
      typeData.loading = false;
    });
};

/**
 * 切换分类
 * @param id
 */
const changeTypes = (val: any) => {
  bodyData.searchParam.type_id = val.id;
  loadBodyList();
};

/**
 * 添加分类
 */
const addTypesEvent = () => {
  editTypesDialog.value.setFormData();
  editTypesDialog.value.showDialog = true;
};

/**
 * 编辑分类
 */
const editTypesEvent = (data: any) => {
  editTypesDialog.value.setFormData(data);
  editTypesDialog.value.showDialog = true;
};

/**
 * 删除分类
 */
const delTypesEvent = (data: any) => {
  ElMessageBox.confirm(t("confirmDelete"), t("deleteTips"), {
    confirmButtonText: t("confirm"),
    cancelButtonText: t("cancel"),
    type: "warning",
  })
    .then(() => {
      deleteTypeApi(data.id).then(() => {
        loadTypeList();
        ElMessage.success(t("operationSuccess"));
      });
    })
    .catch(() => {});
};

// 表单重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  loadBodyList();
};

/**
 * 获取酒体列表
 */
const loadBodyList = (page: number = 1) => {
  bodyData.searchParam.page = page;
  bodyData.loading = true;
  getBodyList(bodyData.searchParam)
    .then((res) => {
      bodyData.data = res.data.data;
      bodyData.total = res.data.total;
    })
    .finally(() => {
      bodyData.loading = false;
    });
};

/**
 * 编辑酒体
 * @param data
 */
const editWineBodyEvent = (data: any) => {
  editWineBodyDialog.value.setFormData(data);
  editWineBodyDialog.value.showDialog = true;
};

/**
 * 添加酒体
 */
const addWineBodyEvent = () => {
  editWineBodyDialog.value.setFormData({ type_id: bodyData.searchParam.type_id });
  editWineBodyDialog.value.showDialog = true;
};
/**
 * 删除酒体
 */
const delWineBodyEvent = (data: any) => {
  ElMessageBox.confirm(t("confirmDelete"), t("deleteTips"), {
    confirmButtonText: t("confirm"),
    cancelButtonText: t("cancel"),
    type: "warning",
  })
    .then(() => {
      deleteBodyApi(data.id).then(() => {
        loadBodyList();
        ElMessage.success(t("operationSuccess"));
      });
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
.types-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  &:last-child {
    border-bottom: none;
  }
  .name {
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .el-tag {
    margin: 0 10px;
  }
}
.types-item-active {
  color: #fff;
  background: #409eff;
}
:deep(.el-card__body) {
  overflow-y: auto;
  max-height: calc(100vh - 100px);
}
</style>
